<template>
    <div class="bookmarks-wrap">
        <Dialog ref="dialogRef"></Dialog>
        <div class="bookmark-input">
            <InputTemplate v-model:url="url"></InputTemplate>
            <el-button class="input-btn" type="primary" @click="addBookmark">添加书签
            </el-button>
        </div>
        <ListTemplate ref="listTemplateRef" filterType="isDelete" :isNegation="true">
        </ListTemplate>
    </div>
</template>

<script setup >
import { ref, watch } from "vue";
import { useWebStore } from "../../store/webStore";
import Dialog from "./Dialog.vue";
import ListTemplate from '@/components/ListTemplate.vue'
import InputTemplate from '@/components/InputTemplate.vue'

const store = useWebStore()

const url = ref('')

const dialogRef = ref()
const listTemplateRef = ref()

const addBookmark = () => {
    dialogRef.value.open()
}

watch(url, (val) => {
    listTemplateRef.value.search(val)
})
</script>

<style lang='scss' scoped>
.bookmarks-wrap {
    height: 100%;

    .bookmark-input {
        display: flex;
        align-items: center;
        margin-left: 20px;

        .input-btn {
            margin-left: 10px;
        }
    }
}

::v-deep(.el-input) {
    max-width: 500px;
}
</style>